<template>
  <a-upload-dragger
    :accept="accept"
    :action="action"
    :before-upload="beforeUpload"
    :custom-request="customRequest"
    :data="data"
    :locale="locale.Upload"
    :directory="directory"
    :disabled="disabled"
    :file-list="fileList"
    :headers="headers"
    :is-image-url="isImageUrl"
    :list-type="listType"
    :max-count="maxCount"
    :method="method"
    :multiple="multiple"
    :name="name"
    :open-file-dialog-on-click="openFileDialogOnClick"
    :preview-file="previewFile"
    :progress="progress"
    :show-upload-list="showUploadList"
    :support-server-render="supportServerRender"
    :with-credentials="withCredentials"
    :remove="remove"
    :on-preview="onPreview"
    @download="download"
    @drop="drop"
    @reject="reject"
  >
    <template v-if="$slots.downloadIcon" #downloadIcon="{ file }">
      <slot name="downloadIcon" :file="file" />
    </template>
    <template v-if="$slots.iconRender" #iconRender="{ file, listType }">
      <slot name="iconRender" :file="file" :listType="listType" />
    </template>
    <template v-if="$slots.itemRender" #itemRender="{ originNode, file, fileList, actions }">
      <slot name="itemRender" :originNode="originNode" :file="file" :fileList="fileList" :actions="actions" />
    </template>
    <template v-if="$slots.previewIcon" #previewIcon="{ file }">
      <slot name="previewIcon" :file="file" />
    </template>
    <template v-if="$slots.removeIcon" #removeIcon="{ file }">
      <slot name="removeIcon" :file="file" />
    </template>
    <slot />
  </a-upload-dragger>
</template>

<script>
import { defineComponent } from 'vue'
import { UploadDragger } from 'ant-design-vue'
export default defineComponent({
  name: 'ZUploadDragger',
  components: {
    AUploadDragger: UploadDragger
  },
  props: {
    accept: {
      type: String,
      default: undefined
    },
    action: {
      type: [String, Function],
      default: undefined
    },
    beforeUpload: {
      type: Function,
      default: undefined
    },
    customRequest: {
      type: Function,
      default: undefined
    },
    data: {
      type: [Object, Function],
      default: undefined
    },
    directory: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Object,
      default: undefined
    },
    headers: {
      type: Object,
      default: undefined
    },
    isImageUrl: {
      type: Function,
      default: undefined
    },
    listType: {
      type: String,
      default: 'text'
    },
    maxCount: {
      type: Number,
      default: undefined
    },
    method: {
      type: String,
      default: 'post'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: 'file'
    },
    openFileDialogOnClick: {
      type: Boolean,
      default: true
    },
    previewFile: {
      type: Function,
      default: undefined
    },
    progress: {
      type: Object,
      default() {
        return { type: 'line' }
      }
    },
    showUploadList: {
      type: [Boolean, Object],
      default: true
    },
    supportServerRender: {
      type: Boolean,
      default: false
    },
    withCredentials: {
      type: Boolean,
      default: false
    },
    remove: {
      type: [Boolean, Function],
      default: undefined
    },
    onPreview: {
      type: Function,
      default: undefined
    }
  },
  methods: {
    download(file) {
      this.$emit('download', file)
    },
    drop(e) {
      this.$emit('drop', e)
    },
    reject(fileList) {
      this.$emit('reject', fileList)
    }
  }
})
</script>
